<template>
  <div class="kefu">
    <van-search placeholder="请输入搜索关键词" />

    <div class="fuwu">
      <div class="h"><h3>自助服务</h3></div>
      <div class="icon">
        <div class="minbox">
          <div class="bimg"></div>
          <p>申请退货</p>
        </div>

        <div class="minbox">
          <div class="bimg i1"></div>
          <p>申请换货</p>
        </div>

        <div class="minbox">
          <div class="bimg i2"></div>
          <p>申请维修</p>
        </div>
        <div class="minbox">
          <div class="bimg i3"></div>
          <p>修改订单</p>
        </div>
        <div class="minbox">
          <div class="bimg i4"></div>
          <p>发票服务</p>
        </div>
        <div class="minbox">
          <div class="bimg i5"></div>
          <p>价格保护</p>
        </div>
        <div class="minbox">
          <div class="bimg i6"></div>
          <p>意见反馈</p>
        </div>
        <div class="minbox">
          <div class="bimg i7"></div>
          <p>服务进度</p>
        </div>
      </div>
    </div>

    <div class="fuwu">
      <div class="h"><h3>帮助中心</h3></div>

      <div class="box">
        <div class="left">
          <van-icon name="logistics" size="30px" />
          <p>物流问题></p>
        </div>
        <div class="right">
          <div class="rminbox">
            <span>发货时效</span>
            <span>催促物流</span>
          </div>
          <div class="rminbox">
            <span>修改收货地址</span>
            <span>配送范围与费用</span>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="left">
          <van-icon name="after-sale" size="30px" />
          <p>订单问题></p>
        </div>
        <div class="right">
          <div class="rminbox">
            <span>修改订单</span>
            <span>取消订单</span>
          </div>
          <div class="rminbox">
            <span>价格保护</span>
            <span>发票服务</span>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="left">
          <van-icon name="balance-pay" size="30px" />
          <p>优惠劵></p>
        </div>
        <div class="right">
          <div class="rminbox">
            <span>优惠卷获取途径</span>
            <span>优惠劵使用规则</span>
          </div>
          <div class="rminbox">
            <span>优惠卷使用限制</span>
            <span></span>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="left">
          <van-icon name="gift-card-o" size="30px" />
          <p>礼品卡></p>
        </div>
        <div class="right">
          <div class="rminbox">
            <span>礼品卡常见问题</span>
            <span>礼品卡章程</span>
          </div>
          <div class="rminbox">
            <span>礼品卡使用规则</span>
            <span></span>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="left">
          <van-icon name="point-gift-o" size="30px" />
          <p>活动问题></p>
        </div>
        <div class="right">
          <div class="rminbox">
            <span>积分规则</span>
            <span>限时购</span>
          </div>
          <div class="rminbox">
            <span>年购套餐</span>
            <span>余额</span>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="left">
          <van-icon name="gem-o" size="30px" />
          <p>会员制度></p>
        </div>
        <div class="right">
          <div class="rminbox">
            <span>Pro会员</span>
            <span>会员等级</span>
          </div>
          <div class="rminbox">
            <span>会员特权</span>
            <span>会员成长值</span>
          </div>
        </div>
      </div>
    </div>

    <div class="lianxi">
      <div class="btn">
        <van-icon name="service-o" size="20px" />在线客服(9:00-24:00)
      </div>

      <div class="fw">
        <van-icon name="other-pay" />
        <p>服务进度</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.kefu {
  background: #eee;
}
.van-search__content {
  background: #fff;
  border-radius: 1.25rem;
}
.van-search {
  width: 92%;
  margin: 0 4%;
  background-color: #eee;
}
.fuwu {
  width: 92%;
  margin: 0.8rem 4%;
  background: #fff;
  border-radius: 1.25rem;
  margin-bottom: 70px;
}
.fuwu .h {
  line-height: 1.875rem;
  border-bottom: 1px solid #999;
}
.icon {
  display: flex;
  flex-wrap: wrap;
}
.minbox .bimg {
  background: url(http://yanxuan.nosdn.127.net/83a5477ad9f1d2d75aec23c5d660a05f.png);
  background-size: 109.2px 112.2px;
  background-position: 109.26px 36.5px;
  width: 36px;
  height: 36px;
}
.minbox .i1 {
  background-position: 109.26px -37.74px;
}
.minbox .i2 {
  background-position: 36.26px -37.74px;
}
.minbox .i3 {
  background-position: 72.26px -37.74px;
}
.minbox .i4 {
  background-position: 72.26px 0.26px;
}
.minbox .i5 {
  background-position: 36.26px 0.26px;
}
.minbox .i6 {
  background-position: 109.26px 0.26px;
}
.minbox .i7 {
  background-position: 36.26px 0.26px;
}
.minbox {
  width: 25%;
  height: 5.25rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
}
.left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 30%;
}
.box {
  width: 100%;
  height: 3.875rem;
  display: flex;
  margin-top: 1.25rem;
}
.right {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}
.right .rminbox {
  display: flex;
  justify-content: space-around;
}
.rminbox span {
  display: block;
  width: 48%;
}

.lianxi {
  width: 100%;
  height: 4.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #eee;
  position: fixed;
  bottom: 0;
}
.lianxi .btn {
  background: orange;
  width: 80%;
  border-radius: 1.25rem;
  text-align: center;
  line-height: 3.125rem;
}
.lianxi .fw {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
</style>